/* 2. 过渡类名 */
/* 开始 */
.left-enter-active {
    animation: leftAnimation 1s;
  }
  /* 结束 */
  .left-leave-active {
    animation: leftAnimation 1s reverse;
  }
  @keyframes leftAnimation {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0px);
    }
  }

  .right-enter-active {
    animation: rightAnimation 1s;
  }
  /* 结束 */
  .right-leave-active {
    animation: rightAnimation 1s reverse;
  }
  @keyframes rightAnimation {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0px);
    }
  }